<template>
	<view class="bold">
		<!-- #ifndef H5 -->
		<!-- <fui-nav-bar></fui-nav-bar> -->
		<!-- #endif -->
		<view style="width: 100%;background: #252525;color: #fff;">
			<view style="width: 96%;padding:4%;">
				我的金币
				<view style="float: right;" @click="jillu()">
					记录
				</view>
			</view>	
			<view style="width: 96%;padding:4%;">
				<span style="font-size: 58rpx;font-weight: 700;margin-top: 10rpx;">
					{{userinfo.money}}
				</span>
				个
			</view>	
			<view @click="xiaoxi()" style="width: 96%;padding:4%;clear: both;height: 120rpx;z-index: 999;">
				<view style="border-radius: 0.5em;font-size: 22rpx;margin-top: 60rpx;;border: 1rpx solid #c1b8a8;color: #c1b8a8;width: 120rpx;text-align: center;height: 45rpx;line-height: 45rpx;">
					去赠送
				</view>	
			</view>	
			
			<view style="width: 96%;padding:4%;height: 30prx;">
				<image style="z-index: 1;;width: 290rpx;height: 290rpx;position: absolute;top:120rpx;right:2rpx" src="/static/my/3c85517b48dc509bd2834b2b0744e00.png">
				</image>		
			</view>	
		</view>	
		<view style="width: 100%;height: 30rpx;">
			<image style="width: 100%;height:110rpx;;position: absolute;top:355rpx" 
			src="/static/my/0d16e3277e137fd056851b41ef6c27c.png">
			</image>		
		</view>	
		<view style="width: 96%;padding:4%;color: #fff;margin-top: 30rpx;font-size: 30rpx;">
			<view style=";background: #252525;height: 55rpx;line-height:55rpx;width: 220rpx;text-align: center;border-radius: 0.2em;">
				金币是什么
			</view>		
			<view style="width: 100%;color: #3d3d3d;font-size: 26rpx;margin-top: 30rpx;">
				金币是蚂蚁游的珍稀资源，是开启二期蚂蚁矿山必备物。未来金币将雇佣矿工挖矿“蚂蚁飞船”提供动力，它可以飞往更多的星球进行探案。
			</view>
		</view>
		
	<!-- 	<view style="width: 96%;padding:4%;color: #fff;font-size: 30rpx;">
			<view style="background: #252525;height: 55rpx;line-height:55rpx;width: 220rpx;text-align: center;border-radius: 0.2em;">
				获得金币
			</view>		
			<view style="width: 100%;color: #3d3d3d;font-size: 26rpx;margin-top: 30rpx;">
				金币是蚂蚁游的珍稀资源，是开启无聊猿高级矿场的必备物。未来,宝石将作为燃料为“NDTU宇宙飞船”提供动力，它可以飞往更多的星球进行探案。
			</view>
		</view>
		 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					{ icon: '/static/my/ic_shop_mall_save.png', label: '全部订单', url: '/pages/my/my_order' },
					{ icon: '/static/my/ic_confirm_receipt.png', label: '待付款', url: '/pages/my/my_order?type=1' },
					{ icon: '/static/my/ic_shop_card_cabinet.png', label: '待发货', url: '/pages/my/my_order?type=2' },
					{ icon: '/static/my/ic_shop_mall_copyright_product.png', label: '待收货', url: '/pages/my/my_order?type=3' },
				],
				navList: [
					// { icon: '/static/a1.png', label: '我的钱包', url: '/pages/my/mywallet' },
					 {icon: '/static/a8.png', label: '我的矿石', url: '/pages/my/my-score' },
				
					{ icon: '/static/a2.png', label: '邀请好友', url: '/pages/share/share_msg' },
					{ icon: '/static/a3.png', label: '收货地址', url: '' },
					{ icon: '/static/a4.png', label: '帮助中心', url: '/pages/my/wenti' },
					// { icon: '/static/a5.png', label: '支付宝绑定', url: '' },
					// { icon: '/static/a6.png', label: '身份认证', url: '' },
					{ icon: '/static/a7.png', label: '检查更新', url: '' },
		
					// { icon: '/static/a9.png', label: '保险箱', url: '' }
				],
				userinfo:null
			};
		},
		onShow() {
			this.get_userinfo();
		},
		methods: {
			jillu(){
				uni.navigateTo({ url: "/pages/my/my_log?type=0"});
			},
			xiaoxi(){
					uni.navigateTo({ url: "/pages/my/gold-song"});
			},
			share_dea(){
				uni.navigateTo({ url: "/pages/share/share_list"});
			},
			get_userinfo(){
				let that = this;
				uni.showLoading({ title: '正在加载', mask: true });
				uni.hideLoading();
				that.$api.request('/api/user/get_info', {},uni.getStorageSync('token'), function(res) {
								uni.hideLoading()
								if (res.code === 1) {
									that.userinfo = res.data
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
				});
				
			},
			// 导航点击处理
			navClickHandle(item) {
				if (item.url) {
					uni.navigateTo({ url: item.url });
				}
			},

			// 跳转设置
			jumpSetting() {
				uni.navigateTo({
					url: '/pages/settings/settings'
				});
			},

			// 跳转分享页面
			jumpShare() {
				uni.navigateTo({
					url: '/pages/share/share'
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #fff;
	}
	.my_z{
		background: url("/static/my/99ad642d016c0c2bef719108fd3f073.png") no-repeat;
		background-size: 100%;
	}

	.myinfo-wrap {
		
		padding: 32rpx;
		padding-top:80rpx;
		display: flex;
		align-items: center;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50em;
			overflow: hidden;
		}

		.myinfo {
			padding: 0 32rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			.num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.total-wrap {
		margin: 24rpx 32rpx;
		position: relative;

		.total_bg {
			width: 100%;
			height: 170rpx;
		}

		.total-area {
			position: absolute;
			left: 180rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #fff;
		}

		.total-label {
			font-size: 30rpx;
			margin-bottom: 12rpx;
		}

		.total-num .num {
			font-size: 48rpx;
			font-weight: bold;
		}

		.total-num .unit {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.invite-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;

		.cell {
			display: flex;
			align-items: center;

			.label {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.label-text {
				font-size: 30rpx;
				font-weight: bold;
			}
			.label-tips {
				font-size: 26rpx;
				font-style: italic;
				background: red;
				color: #fff;
				padding: 4rpx 10rpx;
				margin-left: 12rpx;
				border-radius: 8rpx;
			}

			.arrow {
				width: 32rpx;
				height: 32rpx;
			}

			.value {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.cell-tips {
			font-size: 24rpx;
			color: #999;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
		}

		.total {
			display: flex;
			align-items: center;

			.total-item {
				width: 33.33%;
			}

			.total-item.border {
				border-left: 1px solid #eee;
				padding-left: 24rpx;
			}

			.total-number .num {
				font-size: 36rpx;
				font-weight: bold;
			}

			.total-number .unit {
				font-size: 32rpx;
			}

			.total-desc {
				font-size: 24rpx;
				color: #999;
			}

			.btn-invite {
				background: #333;
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.nav-wrap {
		margin: 24rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		overflow: hidden;

		.navs {
			display: flex;
			flex-wrap: wrap;
		}

		.nav {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 32rpx;
			width: 25%;
		}

		.nav-title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 24rpx 0 32rpx;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
		}

		.nav-text {
			font-size: 28rpx;
			margin-top: 12rpx;
		}
	}
</style>
